<template>
  <ul>
    <li class="comment-item" :class="'article_' + value.comment_id" v-for="value in item.child" :key="value.comment_id">
      <div class="comment-headimg">
        <el-image v-if="value.icon" lazy :src="value.icon" alt="" />
        <el-image v-else lazy src="https://p9-passport.byteacctimg.com/img/mosaic-legacy/3795/3047680722~300x300.image"></el-image>
      </div>
      <div class="comment-main">
        <p class="author-info">
          <span class="left">
            <span class="name">{{ value.nick_name }}</span>
          </span>
          <span class="right">
            <span class="time">{{ $moment(value.created_at * 1000).fromNow() }}</span>
          </span>
        </p>
        <p class="comment-content" v-html="value.comment_info"></p>
        <p class="comment-icon">
          <span class="iconfont icon-dianzan">&nbsp;&nbsp;点赞</span>
          <span class="iconfont icon-pinglun" :class="{ active: variable.open_reply == value.comment_id }"
            >&nbsp;&nbsp;
            <span v-if="value.chilren?.length > 0" @click="variable.open_reply = value.comment_id">
              {{ value.chilren?.length }}
            </span>
            <span v-else>
              <span v-if="variable.open_reply == value.comment_id" @click="variable.open_reply = -1">取消回复</span>
              <span v-else @click="variable.open_reply = value.comment_id">回复</span>
            </span>
          </span>
        </p>
        <CommentBox
          :select="'article_' + value.comment_id"
          v-if="variable.open_reply == value.comment_id"
          :articleid="variable.detail.article_id"
          :fatherid="value.comment_id"
          :placeholder="'回复' + value.nick_name + '...'"
          @sendcomment="reloadcomment"
        />
      </div>
    </li>
  </ul>
</template>

<script setup></script>

<style scoped></style>
